<template>
  <view class="ver-layout">
    <view class="top-layout hor-layout-side-center">
      <view class="hor-layout-center">
        <image class="teacher-icon" :src="studentObj.teacher_avatar"/>
        <view class="teacher-name">{{ studentObj.teacher_name }}</view>
      </view>
      <view class="major-name">{{ studentObj.majors }}</view>
    </view>
    <view class="divider-line"></view>
    <view class="comment-layout">
      <view class="comment-title">意见建议</view>
      <view class="comment-content">{{ commentObj.comment_content }}
      </view>
      <view class="comment-image-list flex-grid-layout">
        <image class="comment-image" :class="{'right':(index+1)%3===0}" v-for="(item,index) in commentObj.images"
             :src="item.url" :key="index"/>
      </view>
      <view class="comment-stars hor-layout-center">
        <view class="text">综合评价</view>
        <u-rate class="star" :count="5" v-model="commentObj.score" active-color="#FF873E"
                inactive-icon="star-fill"></u-rate>
        <view class="text">{{ commentObj.start_content }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {StudentTeachGoalApi} from "@/api/recordStudy.js"

let engine = new StudentTeachGoalApi()
export default {
  name: "commentDetail",
  data() {
    return {
      studentObj: {},
      commentObj: {},
      commentTexts: ['较差', '一般', '一般', '较好', '满意']
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.getCommentDetail()
  },
  methods: {
    getCommentDetail() {
      engine.getCommentDetail(this.studentObj.comment_id).then(res => {
        this.commentObj = res.data
        this.commentObj.start_content = this.commentTexts[res.data.score - 1]
      })
    }
  }
}
</script>

<style scoped>
.top-layout {
  padding: 0px 12px;
  width: 100%;
  height: 76px;
  background: #FFFFFF;
}

.teacher-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.teacher-name {
  margin-left: 12px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.major-name {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.divider-line {
  width: 100%;
  height: 18px;
  background: #F2F2F2;
}

.comment-layout {
  width: 100%;
  padding: 18px 12px;
  background: #FFFFFF;
}

.comment-title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.comment-content {
  margin-top: 12px;
  width: 100%;
  padding: 12px;
  background: #F2F2F2;
  border-radius: 6px;
}

.comment-image-list {
  margin-top: 24px;
}

.comment-image {
  width: calc(100% / 3 - 2px);
  margin-right: 3px;
  margin-top: 10px;
  height: 115px;
}

.comment-image.right {
  margin-right: 0px;
}

.comment-stars {
  margin-top: 25px;
}

.comment-stars > .text {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.comment-stars > .star {
  margin-left: 20px;
  margin-right: 10px;
}
</style>
